<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      input[type='submit'] {
          display: block;
          width: 100%;
          padding: 0.5rem 0;
          border-radius: 4px;
          border: 1px solid blue;
          background-color: #86b7fe;
          color: white;
      }
  </style>
</head>
<body>
<h2>Tnymce富文本编辑器</h2>
<div style="padding: 1rem;">参考：<a href="http://tinymce.ax-z.cn/general/basic-setup.php">http://tinymce.ax-z.cn/general/basic-setup.php</a>
</div>

<div id="app">
  <h1>Vue使用富文本</h1>
  <div>
    <tinymce v-model="text"></tinymce>
    <input type="button" value="我写好了！" @click="submit"/>
  </div>
</div>

<!--以下必须按顺序导入脚本-->
<script src="/static/js/vue-2.6.14.min.js"></script>
<script src="/static/js/tinymce.min.js" referrerpolicy="origin"></script>
<script src="/static/js/tinymce_vue.js"></script>
<script>
  Vue.component('tinymce', tinymceVue)
  new Vue({
    el: '#app',
    data: {
      text: '请输入你的想法……',
    },
    methods: {
      submit: function () {
        console.log('你提交的内容：' + this.text)
      },
    },
  });
</script>
</body>
</html>
